<template>
  <div class="minesweeper">
    <div class="grid" v-for="(row, rowIndex) in grid" :key="rowIndex">
      <button
        v-for="(cell, cellIndex) in row"
        :key="cellIndex"
        @click="handleClick(rowIndex, cellIndex)"
        class="cell"
      >
        {{ cell.value }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grid: [],
      rows: 10,
      columns: 10,
      mines: 10,
    };
  },
  methods: {
    handleClick(rowIndex, cellIndex) {
      if (this.grid[rowIndex][cellIndex].isMine) {
        alert("Game Over");
        this.resetGame();
      } else {
        this.revealCell(rowIndex, cellIndex);
      }
    },
    revealCell(rowIndex, cellIndex) {
      if (this.grid[rowIndex][cellIndex].revealed) return;

      this.grid[rowIndex][cellIndex].revealed = true;

      if (this.grid[rowIndex][cellIndex].value === 0) {
        for (let i = -1; i <= 1; i++) {
          for (let j = -1; j <= 1; j++) {
            const newRowIndex = rowIndex + i;
            const newCellIndex = cellIndex + j;
            if (
              newRowIndex >= 0 &&
              newRowIndex < this.rows &&
              newCellIndex >= 0 &&
              newCellIndex < this.columns
            ) {
              this.revealCell(newRowIndex, newCellIndex);
            }
          }
        }
      }
    },
    resetGame() {
      this.grid = [];
      for (let i = 0; i < this.rows; i++) {
        this.grid[i] = [];
        for (let j = 0; j < this.columns; j++) {
          this.grid[i][j] = { value: 0, isMine: false, revealed: false };
        }
      }
      this.placeMines();
    },
    placeMines() {
      let placedMines = 0;
      while (placedMines < this.mines) {
        const rowIndex = Math.floor(Math.random() * this.rows);
        const cellIndex = Math.floor(Math.random() * this.columns);
        if (!this.grid[rowIndex][cellIndex].isMine) {
          this.grid[rowIndex][cellIndex].isMine = true;
          placedMines++;
        }
      }
      this.calculateValues();
    },
    calculateValues() {
      for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.columns; j++) {
          if (!this.grid[i][j].isMine) {
            let count = 0;
            for (let x = -1; x <= 1; x++) {
              for (let y = -1; y <= 1; y++) {
                const newRowIndex = i + x;
                const newCellIndex = j + y;
                if (
                  newRowIndex >= 0 &&
                  newRowIndex < this.rows &&
                  newCellIndex >= 0 &&
                  newCellIndex < this.columns &&
                  this.grid[newRowIndex][newCellIndex].isMine
                ) {
                  count++;
                }
              }
            }
            this.grid[i][j].value = count;
          }
        }
      }
    },
  },
  mounted() {
    this.resetGame();
  },
};
</script>

<style scoped>
.minesweeper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid {
  display: flex;
  flex-direction: row;
}
.cell {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}
</style>
